<template>
	<view class="work-my-send-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" :topBgColor="topBgColor" title="我发的活"></CustomNav>
		<view class="tab-block block" :style="'margin-top:'+mt">
			<view class="tab-item" :class="process_status==item.id?'selected':''" @click="process_status=item.id"
				v-for="item in tabList" :key="item.id">
				<view class="tab-name">{{item.name}}</view>
				<view class="line"></view>
			</view>
		</view>
		<scroll-view :scroll-y="true" :scroll-top="scrollTop" :enable-back-to-top="true" :show-scrollbar="true"
			:enable-flex="true" class="list-block block" :style="'height:calc(100vh - '+mt+' - 40rpx - 66rpx)'"
			@scrolltolower="changePage">
			<template v-if="list.length>0">
				<WorkItemSend :detail="item" v-for="item in list" :key="item.id"></WorkItemSend>
			</template>
			<template v-if="list.length==0&&!more">
				<view class="empty">暂无数据</view>
			</template>
			<template v-if="list.length>0&&!more">
				<view class="empty">没有更多了</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getProcessStatusBasis,
		sendWorkList
	} from '@/api/work.js'
	import {
		isMore,
		keyValueToArray
	} from '@/util/util.js'
	import WorkItemSend from '@/page_market/components/WorkItem/WorkItemSend'
	export default {
		components: {
			WorkItemSend
		},
		data() {
			return {
				tabList: [],
				process_status: -1,
				topBgColor: 'rgba(0,0,0,0)',
				page: 1,
				limit: 20,
				list: [],
				total: 0,
				more: true,
				scrollTop: 0,
			}
		},
		watch: {
			process_status() {
				this.reload();
			}
		},
		methods: {
			reload() {
				this.page = 1;
				this.getList(true)
			},
			async getStatus() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				await getProcessStatusBasis().then(res => {
					this.tabList = keyValueToArray(res)
					this.tabList.unshift({
						id: -1,
						name: '全部'
					});
				})
			},
			async getList(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				sendWorkList({
					page: this.page,
					limit: this.limit,
					status: this.process_status
				}).then(res => {
					if (refresh) {
						this.list = res.records;
					} else {
						this.list = [...this.list, ...res.records];
					}
					this.more = isMore(this.page, this.limit, res.total)
					this.total = res.total;
				})
			},
			changePage() {
				if (this.more) {
					this.page++;
					this.getList()
				}
			}
		},
		async onLoad() {
			await this.getStatus()
			await this.getList(true)
		}
	}
</script>

<style lang="scss" scoped>
	.work-my-send-page {
		overflow: hidden;
		background-image: $custom-background-gradient;
		background-repeat: no-repeat;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}

		.tab-block {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;

			.tab-item {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #fff;

				.line {
					margin-top: 10rpx;
					height: 6px;
					width: 20px;
					border-radius: 12px;
					background: rgba(0, 0, 0, 0);
				}
			}

			.tab-item.selected {
				.tab-name {
					font-size: 34rpx;
					font-weight: bold;
					color: #fff;
				}

				.line {
					background: #fff;
				}
			}
		}

		.list-block {
			margin-top: 40rpx;
			background: #f8f8f8;
			border-radius: 20px 20px 0 0;
			padding: 30rpx;
		}
	}
</style>